<script setup lang="ts">
import { getObjValue } from '@/utils/util';
import { ref } from 'vue';
import tag1 from '@/assets/images/platformChart/tag_1.png';
import ico5 from '@/assets/images/platformChart/ico_5.png';

defineProps<{
  segObj: any;
}>();

const showLq = ref(false);
</script>
<template>
  <div class="rounded-xl bg-white shadow mt-7">
    <div class="p-4">
      <div class="title-2">{{ segObj?.title1 || '-' }}</div>
      <div class="flex items-center justify-between mt-4 pb-2 mb-3 border-b border-[#f6f6f6]">
        <div class="flex items-center">
          <van-image width="18" height="18" :src="ico5" />
          <span class="text-sm text-[#999] ml-2">{{ getObjValue(segObj?.data?.[0])[0] }}</span>
        </div>
        <span class="title-1">{{ getObjValue(segObj?.data?.[0])[1] }}</span>
      </div>
      <div class="flex items-center justify-between">
        <div>
          <div class="flex items-center">
            <van-icon name="checked" size="20" color="#6fcfb0" />
            <span class="text-sm text-[#999] ml-2">{{ getObjValue(segObj?.data?.[1])[0] }}</span>
          </div>
          <div class="title-1 mt-2 flex items-center" @click="showLq = !showLq">
            <span class="mr-2">{{ getObjValue(segObj?.data?.[1])[1] }}</span>
            <van-icon v-show="showLq" name="arrow-up" color="#999" size="12" />
            <van-icon v-show="!showLq" name="arrow-down" color="#999" size="12" />
          </div>
        </div>
        <div>
          <div class="flex items-center">
            <van-icon name="underway" size="20" color="#eeb025" />
            <span class="text-sm text-[#999] ml-2">{{ getObjValue(segObj?.data?.[2])[0] }}</span>
          </div>
          <div class="title-1 mt-2">{{ getObjValue(segObj?.data?.[2])[1] }}</div>
        </div>
      </div>
    </div>
    <div class="border-t border-[#f6f6f6]" v-show="showLq">
      <div class="flex">
        <div
          class="text-white text-xs bg-contain bg-no-repeat w-[58px] leading-5 pl-2"
          :style="{ backgroundImage: `url(${tag1})` }"
        >
          已领取
        </div>
      </div>
      <div class="p-4 flex items-center justify-between">
        <div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-[#5d80fc] rounded-full mr-1"></div>
            <div class="text-sm text-[#999]">{{ getObjValue(segObj?.data?.[3])[0] }}</div>
          </div>
          <div class="title-2">{{ getObjValue(segObj?.data?.[3])[1] }}</div>
        </div>
        <div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-[#f3cd29] rounded-full mr-1"></div>
            <div class="text-sm text-[#999]">{{ getObjValue(segObj?.data?.[4])[0] }}</div>
          </div>
          <div class="title-2">{{ getObjValue(segObj?.data?.[4])[1] }}</div>
        </div>
        <div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-[#dd3a72] rounded-full mr-1"></div>
            <div class="text-sm text-[#999]">{{ getObjValue(segObj?.data?.[5])[0] }}</div>
          </div>
          <div class="title-2">{{ getObjValue(segObj?.data?.[5])[1] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
